notebook.community

Edit and run



In [ ]:

    
def answer(name):
    with open('sln/' + name) as f: get_ipython().set_next_input(f.read(), replace=True)

Using the template below, make a widget view that displays text, possibly 'Hello World'.



In [ ]:

    
%%javascript
delete requirejs.s.contexts._.defined.CustomViewModule;
define('CustomViewModule', ['jquery', 'widgets/js/widget'], function($, widget) {
    var CustomView = widget.DOMWidgetView.extend({

    });
    return {CustomView: CustomView};
});



In [ ]:

    
from IPython.html.widgets import DOMWidget
from IPython.display import display
from IPython.utils.traitlets import Unicode
class CustomWidget(DOMWidget):
    _view_module = Unicode('CustomViewModule', sync=True)
    _view_name = Unicode('CustomView', sync=True)
display(CustomWidget())



In [ ]:

    
answer('2_1.js')



In [ ]:

    
answer('2_1.py')

Using the template below, make a color picker widget. This can be done in a few steps:

Add a synced traitlet to the Python class.
Add a render method that inserts a input element, with attribute type='color'. The easiest way to do this is to use jQuery.
Add a method that updates the color picker's value to the model's value. Use listenTo listen to changes of the model.
Listen to changes of the color picker's value, and update the model accordingly.



In [ ]:

    
from IPython.html.widgets import DOMWidget
from IPython.display import display
from IPython.utils.traitlets import Unicode
class ColorWidget(DOMWidget):
    _view_module = Unicode('ColorViewModule', sync=True)
    _view_name = Unicode('ColorView', sync=True)



In [ ]:

    
%%javascript
delete requirejs.s.contexts._.defined.ColorViewModule;
define('ColorViewModule', ['jquery', 'widgets/js/widget'], function($, widget) {
    
    var ColorView = widget.DOMWidgetView.extend({
    });
    
    return {ColorView: ColorView};
});



In [ ]:

    
answer('2_2.py')



In [ ]:

    
answer('2_2_1.js')



In [ ]:

    
answer('2_2_2.js')



In [ ]:

    
answer('2_2.js')



In [ ]:

    
w = ColorWidget()
display(w)



In [ ]:

    
display(w)



In [ ]:

    
w.value = '#00FF00'



In [ ]:

    
w.value